<template>
  <div class="bottom row">
    <div class="left column">
      <div class="title top row items-center q-pa-md bordered">
        {{ projectName }}
        <q-popup-edit v-model="projectName" auto-save v-slot="scope">
          <q-input
            v-model="scope.value"
            dense
            autofocus
            counter
            @keyup.enter="scope.set"
          />
        </q-popup-edit>
      </div>
      <div
        class="timeline time-display row items-center justify-center bordered"
      >
        <div class="current">{{ currentTimeStr }}</div>
        <div class="total">/{{ durationStr }}</div>
      </div>
      <div class="track row items-center justify-center bordered">
        <q-btn
          rounded
          size="md"
          color="negative"
          @click="isRecording ? stopRecoding() : startRecoding()"
          no-caps
        >
          <div class="row items-center">
            <q-icon
              :name="isRecording ? 'mdi-stop-circle' : 'mdi-record-circle'"
            />
            <div class="q-ml-sm" style="text-align: start">
              {{
                isRecording
                  ? $t('studio.bottom.stopButton')
                  : $t('studio.bottom.recButton')
              }}
            </div>
          </div>
        </q-btn>
        <q-btn
          flat
          round
          color="sub"
          :icon="mute ? 'mdi-microphone' : 'mdi-microphone-off'"
          @click="mute = !mute"
          size="md"
          padding="5px"
        />
      </div>
      <div class="track row items-center justify-center bordered">
        <q-btn rounded color="sub" @click="addCaption" size="md">
          <div class="row items-center">
            <q-icon name="mdi-plus" />
            <div class="q-ml-sm" style="width: 60px; text-align: start">
              {{ $t('studio.bottom.captionButton') }}
            </div>
          </div>
        </q-btn>
      </div>
      <div class="track row items-center justify-center bordered">
        <q-avatar class="q-mr-sm" size="40px">
          <img :src="currentAudio ? currentAudio.creatorAvatar : ''" />
        </q-avatar>
        <div class="column">
          <div class="author-name">
            {{ currentAudio ? currentAudio.creatorName : '' }}
          </div>
          <div clas="row">
            <q-badge
              style="color: #00b5bc"
              label="Original"
              class="q-mr-sm q-pa-xs"
              v-if="currentAudio ? currentAudio.isOriginal : false"
            />
            <lang-chip
              :code="currentAudio ? currentAudio.langCode : 'en-US'"
            ></lang-chip>
          </div>
        </div>
      </div>
    </div>
    <div class="peak-container">
      <div class="top bordered"></div>
      <div class="timeline bordered"></div>
      <div class="track bordered">
        <slot name="mic-peak"></slot>
      </div>
      <div class="track bordered"></div>
      <div class="track bordered">
        <slot name="video-peak"></slot>
      </div>
    </div>
    <div class="middle column col">
      <div class="top bordered row justify-between items-center">
        <div class="row justify-center items-center q-gutter-x-xs">
          <q-btn
            outline
            dense
            :label="$t('studio.bottom.menu.file')"
            no-caps
            color="sub"
          >
            <q-menu>
              <q-list dense style="min-width: 100px">
                <q-item clickable v-close-popup @click="onFileMenuNewClick">
                  <q-item-section>{{
                    $t('studio.bottom.menu.new')
                  }}</q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="onFileMenuSaveClick">
                  <q-item-section>{{
                    $t('studio.bottom.menu.save')
                  }}</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>{{
                    $t('studio.bottom.menu.saveAs')
                  }}</q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="onFileMenuImportClick">
                  <q-item-section>{{
                    $t('studio.bottom.menu.import')
                  }}</q-item-section>
                </q-item>
                <q-separator />
                <q-item clickable v-close-popup @click="onFileMenuExportClick">
                  <q-item-section>{{
                    $t('studio.bottom.menu.settings')
                  }}</q-item-section>
                  <!-- <q-item-section side>
                    <q-icon name="keyboard_arrow_right" />
                  </q-item-section>
                  <q-menu>
                    <q-list>
                      <q-item clickable v-close-popup>
                        <q-item-section></q-item-section>
                      </q-item>
                      <q-item clickable v-close-popup>
                        <q-item-section></q-item-section>
                      </q-item>
                      <q-item clickable v-close-popup>
                        <q-item-section></q-item-section>
                      </q-item>
                    </q-list>
                  </q-menu>-->
                </q-item>
                <q-item clickable>
                  <q-item-section>{{
                    $t('studio.bottom.menu.help')
                  }}</q-item-section>
                  <q-item-section side>
                    <q-icon name="keyboard_arrow_right" />
                  </q-item-section>
                  <q-menu auto-close anchor="top end" self="top start">
                    <q-list dense>
                      <q-item clickable v-close-popup>
                        <q-item-section>{{
                          $t('studio.bottom.menu.guide')
                        }}</q-item-section>
                      </q-item>
                      <q-item clickable v-close-popup>
                        <q-item-section>{{
                          $t('studio.bottom.menu.feedback')
                        }}</q-item-section>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>{{
                    $t('studio.bottom.menu.exit')
                  }}</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
          <q-btn
            outline
            dense
            :label="$t('studio.bottom.menu.edit')"
            no-caps
            color="sub"
          >
            <q-menu>
              <q-list dense>
                <q-item clickable v-close-popup>
                  <q-item-section>{{
                    $t('studio.bottom.menu.undo')
                  }}</q-item-section>
                  <q-item-section side>
                    <q-item-label caption>Ctrl+Z</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>{{
                    $t('studio.bottom.menu.redo')
                  }}</q-item-section>
                  <q-item-section side>
                    <q-item-label caption>Ctrl+Y</q-item-label>
                  </q-item-section>
                </q-item>
                <q-separator />
                <q-item clickable v-close-popup>
                  <q-item-section>{{
                    $t('studio.bottom.menu.trim')
                  }}</q-item-section>
                  <q-item-section side>
                    <q-item-label caption>Ctrl+T</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>{{
                    $t('studio.bottom.menu.cut')
                  }}</q-item-section>
                  <q-item-section side>
                    <q-item-label caption>Ctrl+X</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>{{
                    $t('studio.bottom.menu.copy')
                  }}</q-item-section>
                  <q-item-section side>
                    <q-item-label caption>Ctrl+C</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>{{
                    $t('studio.bottom.menu.paste')
                  }}</q-item-section>
                  <q-item-section side>
                    <q-item-label caption>Ctrl+V</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
          <q-btn
            outline
            dense
            :disable="!canUndo"
            icon="mdi-undo"
            color="sub"
            @click="onUndo"
          ></q-btn>
          <q-btn
            outline
            dense
            :disable="!canRedo"
            icon="mdi-redo"
            color="sub"
            @click="onRedo"
          ></q-btn>
          <q-btn
            outline
            dense
            icon="mdi-flag-triangle"
            color="sub"
            @click="addFlag"
          ></q-btn>
          <q-btn
            outline
            dense
            icon="mdi-content-cut"
            color="sub"
            @click="splitBlock"
          ></q-btn>
        </div>
        <div class="row justify-center items-center q-gutter-x-xs">
          <q-btn
            outline
            dense
            icon="mdi-skip-previous"
            color="sub"
            @click="onPrevious"
          ></q-btn>
          <q-btn
            outline
            dense
            icon="mdi-step-backward"
            color="sub"
            @click="onBackward"
          ></q-btn>
          <q-btn
            outline
            dense
            :icon="isPlaying ? 'mdi-pause' : 'mdi-play'"
            color="sub"
            :disable="isRecording"
            @click="togglePlay"
          ></q-btn>
          <q-btn
            outline
            dense
            icon="mdi-step-forward"
            color="sub"
            @click="onForward"
          ></q-btn>
          <q-btn
            outline
            dense
            icon="mdi-skip-next"
            color="sub"
            @click="onNext"
          ></q-btn>
        </div>
        <div style="width: 160px"></div>
      </div>
      <div class="timeline bordered">
        <slot name="track-scroller"></slot>
        <slot name="timeline"></slot>
      </div>
      <div class="track bordered">
        <slot name="record-track"></slot>
      </div>
      <div class="track bordered">
        <slot name="caption-track"></slot>
      </div>
      <div class="track bordered">
        <slot name="video-track"></slot>
      </div>
    </div>
    <div class="peak-container">
      <div class="top bordered"></div>
      <div class="timeline bordered"></div>
      <div class="track bordered"></div>
      <div class="track bordered"></div>
      <div class="track bordered"></div>
    </div>
    <div class="right column">
      <div class="top bordered"><!-- content in below --></div>
      <div
        class="top bordered row justify-center items-center q-gutter-x-sm no-wrap"
        style="position: absolute; right: 10px"
      >
        <q-btn-dropdown
          dense
          padding="5px 10px"
          split
          size="12px"
          color="accent"
          :label="$t('studio.bottom.saveButton')"
          @click="save"
          no-caps
        >
          <div class="column q-pa-md q-gutter-y-sm">
            <q-toggle
              dense
              v-model="autoSaveEnabled"
              :label="$t('studio.bottom.autoSave')"
              left-label
              color="accent"
            />
            <q-toggle
              dense
              v-model="cloudSaveEnabled"
              :label="$t('studio.bottom.saveCloud')"
              left-label
              color="accent"
            />
          </div>
        </q-btn-dropdown>
        <q-btn
          dense
          size="12px"
          color="positive"
          :label="$t('studio.bottom.publishButton')"
          icon="mdi-rocket"
          @click="publish"
          no-caps
          no-wrap
          padding="5px 10px"
        ></q-btn>
        <q-btn
          dense
          size="12px"
          color="negative"
          :label="$t('studio.bottom.exitButton')"
          icon="mdi-close"
          @click="exit"
          no-caps
          no-wrap
          padding="5px 10px"
        ></q-btn>
      </div>
      <div class="timeline bordered row justify-between items-center q-px-md">
        <q-icon
          name="mdi-image-filter-hdr"
          size="18px"
          class="col-2"
          color="sub"
        ></q-icon>
        <q-slider
          v-model="zoom"
          :min="1"
          :max="20"
          :step="0.1"
          class="col q-mx-sm"
          color="sub"
        ></q-slider>
        <q-icon
          name="mdi-image-filter-hdr"
          size="24px"
          class="col-2"
          color="sub"
        ></q-icon>
      </div>
      <div class="track bordered row justify-between items-center q-px-md">
        <q-icon
          name="mdi-volume-high"
          size="20px"
          class="col-2"
          color="sub"
        ></q-icon>
        <q-slider
          v-model="recordVolume"
          :min="0"
          :max="1"
          :step="0.1"
          class="col q-mx-sm"
          color="sub"
        ></q-slider>
      </div>
      <div class="track bordered row justify-between items-center q-px-md">
        <q-checkbox
          style="font-size: 12px; color: #808080"
          v-model="autoPause"
          :label="$t('studio.bottom.pauseOnTyping')"
        />
      </div>
      <div class="track bordered row justify-between items-center q-px-md">
        <q-icon
          name="mdi-volume-high"
          size="20px"
          class="col-2"
          color="sub"
        ></q-icon>
        <q-slider
          v-model="videoVolume"
          :step="0.1"
          :min="0"
          :max="1"
          class="col q-mx-sm"
          color="sub"
        ></q-slider>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch, computed } from 'vue';
import LangChip from 'components/LanguageChip.vue';
import Audio from 'src/models/Audio';
import useUndoRedo from 'src/mixins/UndoRedo';
import { useRouter } from 'vue-router';
import { useVideoStore } from 'src/stores/video-store';

export default defineComponent({
  props: {
    autoSave: Boolean,
  },
  components: {
    LangChip,
  },
  emits: [
    'startRecoding',
    'changeAutoSave',
    'stopRecoding',
    'addFlag',
    'save',
    'publish',
    'undo',
    'redo',
    'previous',
    'backward',
    'forward',
    'next',
    'addCaption',
    'splitBlock',
    'exit',
    'new',
    'import',
    'export',
  ],
  setup(props, { emit }) {
    const videoStore = useVideoStore();
    const router = useRouter();
    const currentAudio = computed(() => videoStore.currentAudio);
    const mute = ref(false);
    const zoom = computed({
      get() {
        return videoStore.zoom;
      },
      set(val: number) {
        videoStore.zoom = val;
      },
    });
    const currentTimeStr = computed(() => videoStore.currentTimeStr);
    const durationStr = computed(() => videoStore.durationStr);
    const projectName = computed({
      get() {
        return videoStore.projectName;
      },
      set(val: string) {
        videoStore.projectName = val;
      },
    });
    const enableAudioSave = computed({
      get() {
        return props.autoSave;
      },
      set(val: boolean) {
        emit('changeAutoSave', val);
      },
    });
    const autoPause = ref(false);
    const recoding = ref(false);
    const recordTrackFold = ref(false);
    const captionTrackFold = ref(false);
    const videoTrackFold = ref(false);
    const isPlaying = computed(() => videoStore.isPlaying);
    const isRecording = computed(() => videoStore.isRecording);
    const autoSaveEnabled = ref(false);
    const cloudSaveEnabled = ref(false);
    const { canRedo, canUndo } = useUndoRedo();
    const recordVolume = computed({
      get() {
        return videoStore.recordVolume;
      },
      set(val: number) {
        videoStore.recordVolume = val;
      },
    });
    const videoVolume = computed({
      get() {
        return videoStore.videoVolume;
      },
      set(val: number) {
        videoStore.videoVolume = val;
      },
    });
    let oldRecordVolumn = recordVolume.value;
    let oldVideoVolumn = videoVolume.value;
    return {
      currentAudio,
      mute,
      zoom,
      recoding,
      projectName,
      currentTimeStr,
      durationStr,
      recordTrackFold,
      captionTrackFold,
      videoTrackFold,
      recordVolume,
      videoVolume,
      isPlaying,
      isRecording,
      autoPause,
      enableAudioSave,
      autoSaveEnabled,
      cloudSaveEnabled,
      canUndo,
      canRedo,
      startRecoding() {
        emit('startRecoding');
      },
      stopRecoding() {
        emit('stopRecoding');
      },
      addFlag() {
        emit('addFlag');
      },
      save() {
        emit('save');
      },
      publish() {
        emit('publish');
      },
      togglePlay() {
        if (!isRecording.value) {
          videoStore.togglePlay();
        }
      },
      onUndo() {
        emit('undo');
      },
      onRedo() {
        emit('redo');
      },
      onPrevious() {
        emit('previous');
      },
      onBackward() {
        emit('backward');
      },
      onForward() {
        emit('forward');
      },
      onNext() {
        emit('next');
      },
      addCaption() {
        emit('addCaption');
      },
      splitBlock() {
        emit('splitBlock');
      },
      exit() {
        emit('exit');
        router.go(-1);
      },
      onFileMenuNewClick() {
        emit('new');
      },
      onFileMenuSaveClick() {
        emit('save');
      },
      onFileMenuImportClick(e: MouseEvent) {
        emit('import', e);
      },
      onFileMenuExportClick() {
        emit('export');
      },
    };
  },
});
</script>
<style lang="sass" scoped>

.bordered
  border-bottom: 1px solid #000
.bottom
  width: 100%
  background-color: #1C1C1C
  .title
    color: $sub
    font-size: 14px
  .top
    height: 50px
    background-color: #1C1C1C
  .timeline
    height: 50px
  .time-display
    font-size: 18px
    .current
      font-weight: bold
    .total
      font-weight: normal
      color: $sub
  .track
    height: 80px
  .middle
    z-index: 0
  .left
    width: 205px
  .right
    width: 205px
  .peak-container
    width: 12px
    height: 100%
    background-color: #000
</style>
